<template>
    <div class='sign-up'>
        <public-head>
            <span>填写报名信息</span>
        </public-head>
        <div class="main">
            <ul>
                <li>
                    <label>姓名</label>
                    <input type="text" placeholder="请输入您的姓名" v-model="name">
                </li>
                <li class="sex">
                    <label>性别</label>
                    <div>
                        <span :class="{'selected': sex.select}" v-for="(sex,index) in sexs" @click="selectsex(sex,index)" :key="sex.id">{{sex.sex}}</span>
                    </div>
                </li>
                <li>
                    <label>手机</label>
                    <input type="tel" placeholder="请输入您的手机号" maxlength="11" v-model="phone">
                </li>
                <li>
                    <label>公司</label>
                    <input type="text" placeholder="请输入公司名称" v-model="company">
                </li>
            </ul>
            <button type="button" class="submit" @click="submit">提交</button>
        </div>
        <toast v-if="toast">
            <p slot="text">{{toastText}}</p>
        </toast>
        <loading v-if="is_loading"></loading>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            sexs: [{
                sex: '保密',
                type: 2,
                select: true
            },
            {
                sex: '男',
                type: 1,
                select: false
            },
            {
                sex: '女',
                type: 0,
                select: false
            }],
            name: '', // 姓名
            phone: '', // 手机号
            company: '' // 公司名称
        }
    },
    //created() {
        // 判断是否绑定账号
        // this.isLoading(true)
        // this.axios.post(root + '/api/customer/isBind', { token: this.token }).then((res) => {
        //     this.isLoading(false)
        //     if (!res.data.data.isBind) {
        //         this.$router.replace('/bindaccount')
        //     }
        // })
    //},
    methods: {
        selectsex(sex, index) {
            this.sexs.forEach((item, num) => {
                index == num ? item.select = true : item.select = false
            })
        },
        submit() {
            if (!this.name) {
                this.Toast('请填写您的姓名')
                return
            }
            let reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
            if (!this.phone || !reg.test(this.phone)) {
                this.Toast('请填写正确的手机号码')
                return
            }
            if (!this.company) {
                this.Toast('请输入公司名称')
                return
            }


            const sex_type = this.sexs.filter(sex => sex.select)[0].type

            // 提交信息
            this.isLoading(true)
            this.axios.post(root + '/api/activity/applyActivity', {
                token: this.token,
                name: this.name,
                sex: sex_type,
                phone: this.phone,
                company: this.company,
                activity_id: this.$route.query.id
            }).then((res) => {
                this.isLoading(false)
                if (res.data.status) {
                    this.Toast(res.data.message, () => {
                        this.$router.replace('/hotactive/' + this.$route.query.id)
                    })
                } else {
                    this.Toast(res.data.message)
                }
            })
        },
        ...mapActions(['isLoading'])
    },
    computed: {
        ...mapState(['toast', 'toastText', 'is_loading', 'token'])
    }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.sign-up {
    .init;
    .main {
        ul {
            margin-top: 0.2rem;
        }
        li {
            display: -webkit-flex;
            align-items: center;
            height: 1rem;
            background: #fff;
            padding: 0 0.3rem;
            .bor1px;
            label {
                width: 1.33rem;
                .ft(0.28rem);
                color: #222;
            }
            input {
                width: 3rem;
                line-height: 0.4rem;
            }
        }
        li.sex {
            div {
                flex: 1;
                display: -webkit-flex;
                span {
                    flex: 1;
                    line-height: 0.4rem;
                    padding-left: 0.43rem;
                    background: url('./unselect.png') no-repeat left center;
                    background-size: 0.3rem;
                }
                span.selected {
                    background: url('./select.png') no-repeat left center;
                    background-size: 0.3rem;
                }
            }
        }
        .submit {
            display: block;
            .wh(6.9rem,
            0.8rem);
            line-height: 0.8rem;
            .ft(0.32rem);
            .tc;
            color: #fff;
            background: #5b91fe;
            box-shadow: 0 3px 5px 0 rgba(91, 144, 254, 0.50);
            border-radius: 2px;
            margin: 0.8rem auto 0;
        }
    }
}
</style>